<template>
    <div class="recommend">

        <div class="top">
            <i>——</i>
            <i style='font-weight:bold; font-size: 15px;'>商品推荐</i>
            <i>——</i>
        </div>
        <ul>
            <li v-for="item in mydata" :key="item.product_id">
                <router-link :to="{ name: 'info', params: { id: item.product_id } }">
                    <div class="recommend-img"> <img :src="item.image_url" alt=""></div>
                </router-link>

                <div class="recommend-name">{{ item.name }}</div>
                <div class="recommend-price">￥{{ item.price }}</div>
            </li>
        </ul>

    </div>
</template>


<script setup>
import { Recommend } from '../../api/user';
import { onMounted, ref } from 'vue'

const mydata = ref([])

onMounted(() => {
    getRecommend()
})

const getRecommend = async () => {
    let data = await Recommend()
    mydata.value = data.data.related_recommend.data
}
</script>
<style scoped>
.recommend {
    width: 100vw;
}

i {
    margin: 0 5px;
}

.top {
    margin-top: 30px;
    margin-left: 30%;
}

ul {
    width: 100vw;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-bottom: 80px;

}

li {
    width: 45vw;
    margin: 5px;
}

.recommend-name {
    margin-left: 10px;
    width: 40vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recommend-img img {
    width: 193px;
}

.recommend-price {
    margin-left: 10px;
    color: red;
}
</style>